<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click.prevent="modifyNoRefValHandler">修改noRefVal的值</button>
    <button @click.prevent="name = '小紫'">改名</button>


    <h1>当前计数：{{ info.count }}</h1>
    <button @click.prevent="onClickHanlder" >点击给info.count +1</button>


    <h1>list: {{ list.join(',') }}</h1>
    <button @click.prevent="arrOptOnClickHandler">对数组改一下试试</button>
  </div>
</template>

<script>
// import Vue from 'vue';

export default {
  data() {
    this.name = '小红'

    return {
      // name: '小王',
      info: {},
      // info: {
        //   count: 0
      // },
      noRefVal: '', // 未被引用，即使修改也不会触发响应式变化
      list: ['a', 'b', 'c'],
    };
  },
  created() {
    // Vue.set(this.info, 'count', 1);
    // this.$set(this.info, 'count', 1);
  },
  methods: {
    onClickHanlder() {
      this.info.count++;
    },
    modifyNoRefValHandler() {
      this.noRefVal = 'hey';
      console.log('noRefVal 虽然有变化，但是不会触发响应式');
    },
    arrOptOnClickHandler() {
      // push
      // this.list.push('d');
      // reverse
      // this.list.reverse();
      // concat
      // this.list.concat('d'); // 这大家可以思考一下结果是什么，为什么会这样

      this.list[1] = 'A';
      console.log('修改后的数组', this.list);
    },
  },
}
</script>

<style>

</style>